<!-- 店铺推荐区组件 -->
<template>
  <div class="stores">
    <div class="top">
      <h1>店铺推荐</h1>
      <span>更多品质好店</span>
      <span class="iconfont icon-right"></span>
    </div>
    <div class="swiper-commodity store-slide">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="list in storelistArr" :key="list.id">
          <div class="store-box">
            <div class="box-top">
              <img :src="list.street_thumb" alt="" />
            </div>
            <div class="box-bom">
              <div class="logo">
                <img :src="list.logo_thumb" alt="" />
              </div>
              <div class="name" v-text="list.rz_shopName"></div>
              <div class="desc">
                <span>共计<em v-text="list.total"></em>件商品</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bom">
      <div class="item">
        <img src="@/assets/image/10.png" alt="" />
      </div>
      <div class="item">
        <img src="@/assets/image/11.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Ajax from "@/api/Ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      storelistArr: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async getstorelist() {
      let result = await Ajax("/api/visual/store", { number: 10 }, "post");
      this.storelistArr = result.data;
    },
  },
  mounted() {
    this.getstorelist();
  },
};
</script>
<style lang="less">
.stores {
  width: 96%;
  background-color: #fff;
  border-radius: 1rem;
  margin: 1rem 0.8rem 0;

  .top {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1rem 1rem;

    h1 {
      font-size: 1.8rem;
      color: #000;
      font-weight: 600;
      margin: 0 1rem 0 0.5rem;
    }

    span {
      color: #888;
      font-size: 1.2rem;
    }

    .icon-right {
      color: #f20d23;
      font-size: 1.4rem;
      font-weight: 600;
      margin: 0 0 0 5px;
    }
  }
  .store-slide {
    overflow-x: auto;
    display: flex;
    .swiper-wrapper {
      padding: 0 0 0 1rem;
      display: flex;
      .swiper-slide {
        width: 10.8rem;
        margin-right: 0.9rem;
        border-radius: 1rem;
        overflow: hidden;

        .store-box {
          background-color: #f6f6f6;

          .box-top {
            width: 100%;
            height: 9rem;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .box-bom {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem 0.5rem 1rem;

            .logo {
              width: 3rem;
              height: 3rem;
              border-radius: 50%;
              border: 1px solid #fff;
              position: absolute;
              top: -1rem;

              img {
                width: 100%;
                border-radius: 50%;
              }
            }

            .name {
              font-size: 0.8rem;
              color: #333;
              height: 2.5rem;
              line-height: 2.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .desc {
              color: #888;
              font-size: 0.5rem;
              em {
                color: #333;
                margin: 0 0.1rem;
                font-style: normal;
              }
            }
          }
        }
      }
    }
  }

  .bom {
    padding: 1rem;
    display: flex;

    .item {
      border-radius: 1rem;
      width: 19rem;

      &:last-child {
        margin-left: 0.5rem;
      }

      img {
        width: 100%;
      }
    }
  }
}
</style>